<template>
	<div >
		<el-form-item
			label="团购主题"
			:rules="[{ required: true, message: '请输入接龙主题' }]"
			prop="model.name"
		>
			<el-input v-model="form.model.name" placeholder="请输入接龙主题" class="max-w460"></el-input>
		</el-form-item>

		<el-form-item label="团购主图">
			<el-row>
				<div class="draggable-list">
					<div
						class="item img-select"
						v-if="!form.model.img"
						@click="openProductUpload('image', 'img')"
					>
					<el-icon><Plus /></el-icon>
					</div>
					<div
						v-if="form.model.img"
						class="item"
						@click="openProductUpload('image', 'img')"
					>
						<img :src="form.model.img" width="100" height="100" />
					</div>
				</div>
			</el-row>
		</el-form-item>


		<el-form-item label="团购详情">
			<div style="width:100%;">
				<el-button type="text" @click="addDetail('text')"> 文字 </el-button>
				<el-button type="text" @click="addDetail('img')"> 图片 </el-button>
				<div v-if="form.model.info.length>0">
				<div v-for="(i,index) in form.model.info" :key="index">
					<div style="width:100%;margin-bottom: 10px;"  v-if="i.type == 'text'">
						<el-input style="width:100%;" placeholder="输入文字..." type="textarea" v-model = "i.value" ></el-input>
					</div>
					<div style="margin-bottom: 10px;" v-if="i.type == 'img'">
						<image :src="i.value"  mode="widthFix"></image>
					</div>
				</div>

					<!-- <div v-for="(item, index) in form.model.info" :key="index" class="team-detail-item" >
						<div class="team-detail-head">
							 <div class="team-detail-head-right">
								<div class="team-detail-btn" @click="upinfo(index)" v-if="index > 0">
									<uni-icons type="up" size="12" color="#999"></uni-icons>
								</div>
								<div class="team-detail-btn" @click="downinfo(index)" v-if="form.info.length - 1 > index ">
									<uni-icons type="down" size="12" color="#999"></uni-icons>
								</div>
								<div @click="delinfo(index)">
									<uni-icons type="clear" size="28" color="#999"></uni-icons>
								</div>
							</div> 
						</div>
						<div class="pt30">
							<div  v-if="item.type == 'text'">
								<el-input placeholder="输入文字..." type="textarea" v-model = "item.value" ></el-input>
							</div>
							<div style="width: 100%; " v-if="item.type == 'img'">
								<image :src="item.value" style="width:100%;" mode="widthFix"></image>
							</div>
						</div>
					</div> -->
			</div>
			</div>
			
			
		
		</el-form-item>

		<el-form-item label="接龙时间" prop="dates">
			<el-date-picker
			class="max-w460"
				clearable
				v-model="form.dates"
				date-format="YYYY-MM-DD"
				time-format="HH:mm"
				value-format="YYYY-MM-DD HH:mm"
				type="datetimerange"
				start-placeholder="开始时间"
				end-placeholder="结束时间"
				:default-time="form.defaultTime"
				/>
		</el-form-item>
		
		<el-form-item label="支付支持自提">
			<el-radio-group v-model="form.model.is_pickup">
				<el-radio :label="0">支持</el-radio>
				<el-radio :label="1">不支持</el-radio>
			</el-radio-group>
		</el-form-item>

		<el-form-item
			label="商品展示样式"
		>
			<el-radio-group v-model="form.model.img_type">
				<el-radio :label="0">小图</el-radio>
				<el-radio :label="1">大图</el-radio>
			</el-radio-group>
		</el-form-item>

		<el-form-item
			label="团购商品"
		>
			<el-button style="margin-bottom:20px" @click="form.isProShow = true">从商品库中选取</el-button>
			<el-table ref="selectPro" size="small" :data="form.selectProTable" border style="width: 100%" >
					<el-table-column prop="product_name" show-overflow-tooltip label="产品" width="">
						<template #default="scope">
							<div class="product-info" style="	display: flex;align-items: center;">
								<img style="width:60px;height: 60px; margin-right: 10px;" v-if="scope.row.image[0].file_path" v-img-url="scope.row.image[0].file_path" alt="" />
								<div class="info">
									<div class="name">{{ scope.row.product_name }} </div>
									<!-- <div class="">商品编码：{{ scope.row.product_sku.product_no || '无' }}</div> -->
									<span class="price" >￥{{ scope.row.product_price }}</span>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="sku" show-overflow-tooltip label="SKU规格" align="center" width="128">
						<template #default="scope">
							<div class="sku-item" v-for="(i,index) in scope.row.sku" :key="index">
								<!-- <span  class="sku-item-option ">{{ i.product_no }} </span> -->
								<span class="sku-item-option "> {{ i.spec_sku_value }}</span>
							</div>
						</template>
					</el-table-column>

					<el-table-column prop="sku" show-overflow-tooltip label="SKU库存" align="center" width="128">
						<template #default="scope">
							<div class="sku-item" v-for="(i,index) in scope.row.sku" :key="index">
								<span  class="sku-item-option " v-if="i.unlimit == 1">不限量 </span>
								<span  class="sku-item-option " v-else> {{ i.stock_num }}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="sales_actual" label="实际销量" align="center" width="128"></el-table-column>
					<el-table-column fixed="right" label="操作" align="center" width="128">
						<template #default="scope" >
							<el-button @click="delClick(scope.row)" link type="danger" size="small">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
		</el-form-item>

		<!--商品图片组件-->
		<Upload
			v-if="isProductUpload"
			:config="config"
			:isupload="isProductUpload"
			@returnImgs="returnProductImgsFunc"
			>上传图片</Upload
		>
		<!-- 团购详情上传图片 -->
		<Upload
			v-if="isProductUpload"
			:config="config"
			:isupload="isProductUpload"
			@returnImgs="returnProductImgsFunc"
			>上传图片</Upload
		>
	</div>
</template>

<script>
import Upload from "@/components/file/Upload.vue";
import draggable from "vuedraggable";
export default {
	components: {
		Upload,
		draggable,
	},
	data() {
		return {
			isProductUpload: false,
			config: {},
			file_name: "image",
			test: [1,2,3,4]
		};
	},
	inject: ["form"],
	created() {
	},
	methods: {
		// 团购详情，添加文字图片
		addDetail(type){
			if(type == 'text'){
				this.form.model.info.push(
					{
						type:'text',
						value:'',
					}
				)
			}
			if(type == 'img'){
				this.form.model.info.push(
					{
						type:'img',
						value:'',
					}
				)
			}
			console.log(this.form.model.info)
		},

		// 删除选中商品
		delClick(row){
			console.log(row)
			let index =	this.form.selectProTable.findIndex(i=>i.product_id == row.product_id)
			this.form.selectProTable.splice(index,1)

			console.log( this.form.selectProTable)
		},

		/*打开上传图片*/
		openProductUpload: function (file_type, file_name) {
			this.file_name = file_name;
			if (file_type == "image") {
				this.config = {
					total: 9,
					file_type: "image",
				};
			} else {
				this.config = {
					total: 1,
					file_type: "video",
				};
			}
			this.isProductUpload = true;
		},

		/*上传商品图片*/
		returnProductImgsFunc(e) {
			console.log(e)
			if (e != null) {
				if (this.file_name == "video") {
					this.form.model.video_id = e[0].file_id;
					this.form.model.video = e[0];
				} else if (this.file_name == "image") {
					this.form.model.image = this.form.model.image.concat(e);
				} else if (this.file_name == "img") {
					this.form.model.img = e[0].file_path;
				}
			}
			this.isProductUpload = false;
		},

		/*删除商品图片*/
		deleteImg(index) {
			this.form.model.image.splice(index, 1);
		},
		delVideo() {
			this.form.model.video_id = 0;
			this.form.model.video = {};
		},
		/*打开添加*/
		setExpress() {
			this.$router.push("/setting/delivery/index");
		},
		changeDelivery(e) {
			if (e == 0) {
				this.form.model.delivery_id = "";
			}
		},
	},
};
</script>

<style>
.edit_container {
	font-family: "Avenir", Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	line-height: 20px;
	color: #2c3e50;
}

.ql-editor {
	height: 400px;
}

.draggable-list {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.draggable-list .wrapper > span {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.draggable-list .item {
	position: relative;
	width: 110px;
	height: 110px;
	margin-top: 10px;
	margin-right: 10px;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid #dddddd;
}

.draggable-list .delete-btn {
	position: absolute;
	top: 0;
	right: 0;
	width: 16px;
	height: 16px;
	background: red;
	line-height: 16px;
	font-size: 16px;
	color: #ffffff;
	display: none;
}

.draggable-list .item:hover .delete-btn {
	display: block;
}

.draggable-list .item img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	max-height: 100%;
	max-width: 100%;
}

.draggable-list .img-select {
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px dashed #dddddd;
	font-size: 30px;
}

.draggable-list .img-select i {
	color: #409eff;
}

.product-info {
	display: flex;

}



.pic {
	display: block;
	width: 60px;
}

.price {
	color: red;
}
</style>
